/**
 * Agent W.
 */

.chat__agent-w {
	display: inline-block;
}

.chat__agent-w:hover {
	animation: jiggle .5s linear;
}

.chat__agent-w svg .ears .electric {
	display: none;
}

.chat__agent-w svg .mouth .cool,
.chat__agent-w svg .mouth .sad,
.chat__agent-w svg .mouth .asleep {
	display: none;
}

.chat__agent-w svg .eyes .asleep,
.chat__agent-w svg .eyes .dreamy,
.chat__agent-w svg .eyes .dealwithit,
.chat__agent-w svg .eyes .somber,
.chat__agent-w svg .eyes .blush,
.chat__agent-w svg .eyes .sad,
.chat__agent-w svg .eyes .wink {
	display: none;
}


/**
 * Electric ears
 */

.chat__agent-w .electric .ears .electric {
	display: block;
}

.chat__agent-w .electric .ears .default {
	display: none;
}


/**
 * Cool
 */

.chat__agent-w .cool .mouth .cool {
	display: block;
}

.chat__agent-w .cool .mouth .default {
	display: none;
}

.chat__agent-w .cool .eyes .dealwithit {
	animation: dealwithit .5s linear;
	display: block;
}

.chat__agent-w .cool .eyes .default {
	/*display: none; */
}


/**
 * Sad
 */

.chat__agent-w .sad .mouth .sad {
	display: block;
}

.chat__agent-w .sad .mouth .default {
	display: none;
}

.chat__agent-w .sad .eyes .sad {
	display: block;
}

.chat__agent-w .sad .eyes .default {
	display: none;
}


/**
 * Asleep
 */

.chat__agent-w .asleep .eyes .asleep {
	display: block;
}

.chat__agent-w .asleep .eyes .default {
	display: none;
}

.chat__agent-w .asleep .mouth .asleep {
	display: block;
}

.chat__agent-w .asleep .mouth .default {
	display: none;
}


/**
 * Dreamy
 */

.chat__agent-w .dreamy .eyes .dreamy {
	display: block;
}

.chat__agent-w .dreamy .eyes .default {
	display: none;
}


/**
 * Somber
 */

.chat__agent-w .somber .eyes .somber {
	display: block;
}

.chat__agent-w .somber .eyes .default {
	display: none;
}


/**
 * Blush
 */

.chat__agent-w .blush .eyes .blush {
	display: block;
}

.chat__agent-w .blush .eyes .default {
	display: none;
}


/**
 * Wink
 */

.chat__agent-w .wink .eyes .wink {
	display: block;
}

.chat__agent-w .wink .eyes .default {
	display: none;
}


/**
 * Animations
 */

@keyframes dealwithit {

	0% {
		transform: translateY( -20px );
	}

	100% {
		transform: translateY( 0 );
	}

}

@keyframes bounce {

	0%, 20%, 50%, 80%, 100% {
		transform: translateY( 0 );
	}

	40% {
		transform: translateY( -10px );
	}

	60% {
		transform: translateY( -5px );
	}

}

@keyframes jiggle {

	0%, 100% {
		transform: rotate( 0deg );
	}

	40%, 80% {
		transform: rotate( 30deg );
	}

	60% {
		transform: rotate( -30deg );
	}

}
